<!doctype html>
<html>

<head>
  <!doctype html>
  <html>

  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>联心菜市场</title>
    <link type="text/css" href="css/public.css" rel="stylesheet">
    <link type="text/css" href="css/index.css" rel="stylesheet">
    <script type="text/javascript">
      document.documentElement.style.fontSize=document.documentElement.clientWidth/768*100+'px';
    </script>

    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  </head>
  <style>
    .abc {}
  </style>

<body>
  <div class="bg">
    <div class="title">联心菜市场</div>
    <div class="leftMain">
      <div class="leftMain_top">
        <div class="leftMain_topIn">
          <ul>
            <li>
              <div class="liIn">
                <h3>这里是标题1</h3>
                <p class="shu"><span class="shu1">6890.69</span><i>元</i></p>
                <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
              </div>
            </li>
            <li>
              <div class="liIn">
                <h3>这里是标题2</h3>
                <p class="shu"><span class="shu2">6090.99</span><i>元</i></p>
                <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
              </div>
            </li>
            <li>
              <div class="liIn">
                <h3>这里是标题3</h3>
                <p class="shu"><span class="shu3">2890.39</span><i>元</i></p>
                <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
              </div>
            </li>
            <li>
              <div class="liIn">
                <h3>这里是标题4</h3>
                <p class="shu"><span class="shu4">7590.15</span><i>元</i></p>
                <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="leftMain_middle">
        <div class="leftMain_middle_left">
          <div class="leftMain_middle_leftIn">
            <h3>这里是标题</h3>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
            <script type="text/javascript">
              //window.onload = function () {
              //指定图表的配置项和数据
              var dataAxis=['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日'];
              var data=[220,182,191,234,290,330,310,123,442,321,90,149,210,122,200];
              var yMax=500;
              var dataShadow=[];

              for(var i=0;i<data.length;i++) {
                dataShadow.push(yMax);
              }

              option={
                title: {
                  text: '',
                  subtext: ''
                },
                grid: {
                  x: 40,
                  y: 40,
                  x2: 20,
                  y2: 20,

                },
                xAxis: {
                  data: dataAxis,
                  axisLabel: {
                    /*inside: true,*/
                    interval: 0,
                    textStyle: {
                      color: '#fff',
                      fontSize: 12

                    }
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: true,
                    symbol: ['none','arrow'],
                    symbolOffset: 12,
                    lineStyle: {
                      color: '#fff',
                    }
                  },
                  z: 10
                },
                yAxis: {
                  type: 'value',
                  name: '单位：元',
                  axisLine: {
                    show: true,
                    symbol: ['none','arrow'],
                    symbolOffset: 12,
                    lineStyle: {
                      color: '#fff',
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#fff',
                      fontSize: 12
                    }
                  }
                },

                dataZoom: [
                  {
                    type: 'inside'
                  }
                ],
                series: [
                  { // For shadow
                    type: 'bar',
                    itemStyle: {
                      color: 'rgba(0,0,0,0.05)'
                    },
                    barGap: '-100%',
                    barCategoryGap: '40%',
                    data: dataShadow,
                    animation: false
                  },
                  {
                    type: 'bar',
                    itemStyle: {
                      color: new echarts.graphic.LinearGradient(
                        0,0,0,1,
                        [
                          {offset: 0,color: '#0efdff'},
                          {offset: 0.5,color: '#188df0'},
                          {offset: 1,color: '#188df0'}
                        ]
                      )
                    },
                    emphasis: {
                      itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                          0,0,0,1,
                          [
                            {offset: 0,color: '#2378f7'},
                            {offset: 0.7,color: '#2378f7'},
                            {offset: 1,color: '#0efdff'}
                          ]
                        )
                      }
                    },
                    data: data
                  }
                ]
              };

              // Enable data zoom when user click bar.
              /*var zoomSize = 6;
              myChart.on('click', function (params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                  type: 'dataZoom',
                  startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                  endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
              });*/

              //获取dom容器
              var myChart=echarts.init(document.getElementById('chartmain'));
              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);
              //};
            </script>
            <span class="border_bg_leftTop"></span>
            <span class="border_bg_rightTop"></span>
            <span class="border_bg_leftBottom"></span>
            <span class="border_bg_rightBottom"></span>
          </div>
        </div>
        <div class="leftMain_middle_right">
          <div class="leftMain_middle_rightIn">
            <h3>这里是标题</h3>
            <div class="biaoge biaoge_pai" style="width:100%; height:25vh">
              <div class="biaoge_paiIn">
                <ul>
                  <li>
                    <div class="liIn">
                      <div class="liIn_left"><span class="bot"></span><span class="zi">第一名</span></div>
                      <div class="liIn_line">
                        <div class="line_lineIn" style="width:98.5%;"></div>
                      </div>
                      <p class="num">98.5%</p>
                    </div>
                  </li>
                  <li>
                    <div class="liIn liIn2">
                      <div class="liIn_left"><span class="bot"></span><span class="zi">第二名</span></div>
                      <div class="liIn_line">
                        <div class="line_lineIn" style="width:88.5%;"></div>
                      </div>
                      <p class="num">88.5%</p>
                    </div>
                  </li>
                  <li>
                    <div class="liIn liIn3">
                      <div class="liIn_left"><span class="bot"></span><span class="zi">第三名</span></div>
                      <div class="liIn_line">
                        <div class="line_lineIn" style="width:68.5%;"></div>
                      </div>
                      <p class="num">68.5%</p>
                    </div>
                  </li>
                  <li>
                    <div class="liIn liIn4">
                      <div class="liIn_left"><span class="bot"></span><span class="zi">第四名</span></div>
                      <div class="liIn_line">
                        <div class="line_lineIn" style="width:40.5%;"></div>
                      </div>
                      <p class="num">40.5%</p>
                    </div>
                  </li>
                  <li>
                    <div class="liIn liIn5">
                      <div class="liIn_left"><span class="bot"></span><span class="zi">第五名</span></div>
                      <div class="liIn_line">
                        <div class="line_lineIn" style="width:22.5%;"></div>
                      </div>
                      <p class="num">22.5%</p>
                    </div>
                  </li>
                  <li>
                    <div class="liIn liIn6">
                      <div class="liIn_left"><span class="bot"></span><span class="zi">第六名</span></div>
                      <div class="liIn_line">
                        <div class="line_lineIn" style="width:10.5%;"></div>
                      </div>
                      <p class="num">10.5%</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <span class="border_bg_leftTop"></span>
            <span class="border_bg_rightTop"></span>
            <span class="border_bg_leftBottom"></span>
            <span class="border_bg_rightBottom"></span>
          </div>
        </div>
      </div>
      <div class="leftMain_middle">
        <div class="leftMain_middle_left">
          <div class="leftMain_middle_leftIn">
            <h3>这里是标题</h3>
            <div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
            <script type="text/javascript">
              //window.onload = function (){
              //指定图表的配置项和数据

              option={
                title: {
                  text: ''
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                  },
                  right: '10%',
                  data: ['折线一','折线二']
                },
                grid: {
                  x: 40,
                  y: 40,
                  x2: 20,
                  y2: 20,
                },
                toolbox: {
                  feature: {
                    //saveAsImage: {}
                  }
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  axisLabel: {
                    /*inside: true,*/
                    interval: 0,
                    textStyle: {
                      color: '#fff',
                      fontSize: 12

                    }
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: true,
                    symbol: ['none','arrow'],
                    symbolOffset: 12,
                    lineStyle: {
                      color: '#fff',
                    }
                  },
                  data: ['00:00','02:00','04:00','06:00','08:00','10:00','12:00']
                },
                yAxis: {
                  type: 'value',

                  axisLine: {
                    show: true,
                    symbol: ['none','arrow'],
                    symbolOffset: 12,
                    lineStyle: {
                      color: '#fff',
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#fff',
                      fontSize: 12
                    }
                  }
                },
                series: [
                  {
                    name: '折线一',
                    type: 'line',
                    stack: '总量',
                    data: [280,102,191,134,390,230,210],
                    itemStyle: {
                      normal: {
                        color: "#0efdff",//折线点的颜色
                        lineStyle: {
                          color: "#0efdff",//折线的颜色
                          width: 2,
                        }
                      },
                    }
                  },
                  {
                    name: '折线二',
                    type: 'line',
                    stack: '总量',
                    data: [100,132,131,234,290,330,110]
                  },
                ]
              };
              //获取dom容器
              var myChart=echarts.init(document.getElementById('chartmain_zhe'));
              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);
              //};
            </script>
            <span class="border_bg_leftTop"></span>
            <span class="border_bg_rightTop"></span>
            <span class="border_bg_leftBottom"></span>
            <span class="border_bg_rightBottom"></span>
          </div>
        </div>
        <div class="leftMain_middle_right">
          <div class="leftMain_middle_rightIn">
            <h3>这里是标题</h3>
            <div class="biaoge biaoge_bi" style="width:100%; height:25vh">
              <ul>
                <li>
                  <div class="liIn">
                    <p class="shu shu1">23</p>
                    <p class="zi">今日收益比例</p>
                  </div>
                </li>
                <li>
                  <div class="liIn">
                    <p class="shu shu2">107</p>
                    <p class="zi">本月收益比例</p>
                  </div>
                </li>
                <li>
                  <div class="liIn">
                    <p class="shu shu3">107</p>
                    <p class="zi">历史收益比例</p>
                  </div>
                </li>
                <li>
                  <div class="liIn">
                    <p class="shu shu4">23</p>
                    <p class="zi">今日收益比例</p>
                  </div>
                </li>
                <li>
                  <div class="liIn">
                    <p class="shu shu5">23</p>
                    <p class="zi">本月收益比例</p>
                  </div>
                </li>
                <li>
                  <div class="liIn">
                    <p class="shu shu6">23</p>
                    <p class="zi">历史收益比例</p>
                  </div>
                </li>
              </ul>

            </div>
            <span class="border_bg_leftTop"></span>
            <span class="border_bg_rightTop"></span>
            <span class="border_bg_leftBottom"></span>
            <span class="border_bg_rightBottom"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="rightMain">
      <div class="rightMain_top">
        <div class="rightMain_topIn">
          <h3>这里是标题</h3>
          <div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
          <script type="text/javascript">
            option={
              title: {
                text: '数据情况统计',
                subtext: '',
                left: 'right',
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                // orient: 'vertical',
                // top: 'middle',
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 40,
                bottom: 20,
                left: 'right',
                data: ['西凉','益州','兖州','荆州','幽州'],
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }

              },
              grid: {
                x: '-10%',
                y: 40,
                x2: 20,
                y2: 20,
              },
              color: ['#09d0fb','#f88cfb','#95f8fe','#f9f390','#ecfeb7'],
              series: [
                {
                  type: 'pie',
                  radius: '65%',
                  center: ['50%','50%'],
                  selectedMode: 'single',
                  data: [
                    {
                      value: 1548,name: '幽州',

                    },
                    {value: 535,name: '荆州'},
                    {value: 510,name: '兖州'},
                    {value: 634,name: '益州'},
                    {value: 735,name: '西凉'}
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            //获取dom容器
            var myChart=echarts.init(document.getElementById('chartmain_bing'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

          </script>
          <span class="border_bg_leftTop"></span>
          <span class="border_bg_rightTop"></span>
          <span class="border_bg_leftBottom"></span>
          <span class="border_bg_rightBottom"></span>
        </div>
      </div>
      <div class="rightMain_bottom">
        <div class="rightMain_bottomIn">
          <h3>这里是标题</h3>
          <div class="biaoge biaoge_list" style="width:100%; height:36vh">
            <div class="biaoge_listIn">
              <ul class="ul_title">
                <li>用户</li>
                <li>类型号</li>
                <li>类别一</li>
                <li>类别二</li>
                <li>类别三</li>
              </ul>
              <div class="ul_list">
                <div class="ul_listIn">
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>11</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>12</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>13</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>14</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>15</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>16</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>11</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>12</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>13</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>14</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>15</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                  <ul class="ul_con">
                    <li>张三</li>
                    <li>16</li>
                    <li>类别一</li>
                    <li>类别二</li>
                    <li>类别三</li>
                  </ul>
                </div>
              </div>
            </div>

          </div>
          <span class="border_bg_leftTop"></span>
          <span class="border_bg_rightTop"></span>
          <span class="border_bg_leftBottom"></span>
          <span class="border_bg_rightBottom"></span>
        </div>
      </div>
    </div>
    <div style="clear:both;"></div>
  </div>
  <!--数字增长累加动画-->
  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(".shu1").numScroll();
    $(".shu2").numScroll();
    $(".shu3").numScroll();
    $(".shu4").numScroll();
    $(".shu5").numScroll();
    $(".shu6").numScroll();

    /*$(".num2").numScroll({
      time:5000
    });*/
  </script>

</body>

</html>